<template>
	<el-dialog v-model="state.dialogFormVisible" width="40%" :z-index="9" @close="cancelHandle">
		<template #header>
			<div class="custom-header">{{ state.isUpdateFlag ? '新增' : '编辑' }}</div>
		</template>
		<el-form ref="ruleFormRef" :model="state.form" :rules="rules">
			<el-form-item label="评审阶段:" prop="businessStage">
				<el-select v-model="state.form.businessStage" placeholder="请选择" clearable>
					<el-option v-for="item in selectlist" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item prop="definitionName" label="文件名称:">
				<el-input v-model="state.form.definitionName" placeholder="文件名称" />
			</el-form-item>

			<el-form-item v-if="userStore.user.roleCode.includes('SYADMIN')" label="附件代码:" prop="businessCode">
				<el-input v-model="state.form.businessCode" placeholder="附件代码" />
			</el-form-item>

			<el-form-item label="附件后缀类型:" prop="suffixType">
				<el-select v-model="state.form.suffixType" placeholder="请选择" clearable>
					<el-option v-for="item in hzlist" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="是否必传:" prop="mustUpload">
				<el-radio-group v-model="state.form.mustUpload">
					<el-radio :label="1" size="small">是</el-radio>
					<el-radio :label="0" size="small">否</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="是否支持多个附件:" prop="multiple">
				<el-radio-group v-model="state.form.multiple">
					<el-radio :label="1" size="small">是</el-radio>
					<el-radio :label="0" size="small">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="备注:">
				<el-input v-model="state.form.remark" type="textarea" :rows="5" placeholder="请输入备注"></el-input>
			</el-form-item>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="sumbitHandle(ruleFormRef, true)">提交</el-button>
				<el-button @click="cancelHandle"> 关闭 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules, UploadProps, UploadRawFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import { listFileTypeApi, listStageTypeApi, addinsertApi, updateinsertApi } from '@/api/system/fifle'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()

interface RuleForm {
	definitionName: String
	suffixType: String
	businessStage: String
	businessCode: String
	mustUpload: String | Number
	multiple: String | Number
	remark: String
}
const state = reactive({
	form: {
		definitionName: '',
		suffixType: '',
		businessStage: '',
		businessCode: '',
		mustUpload: 0,
		multiple: 0,
		remark: ''
	},
	dialogFormVisible: false,
	isUpdateFlag: false
})
const hzlist = ref([])

const projectType = ref(null)
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
	definitionName: [{ required: true, message: '请输入附件名称', trigger: 'blur' }],
	businessCode: [{ required: true, message: '请输入附件代码', trigger: 'blur' }],
	businessStage: [{ required: true, message: '请选择评审阶段', trigger: ['blur', 'change'] }],
	suffixType: [{ required: true, message: '请选择后缀', trigger: ['blur', 'change'] }],
	mustUpload: [{ required: true, message: '请选择是否必传', trigger: ['blur', 'change'] }],
	multiple: [{ required: true, message: '请选择是否支持多个附件', trigger: ['blur', 'change'] }]
})
const emit = defineEmits(['refreshDataList'])

const selectlist = ref<any>([])
// ==============================================================
// type项目类型   0：标准项目  1：前瞻性项目
const init = (isUpdate: Boolean, row: any, type: any) => {
	state.isUpdateFlag = isUpdate
	if (!isUpdate) {
		detailMethods(row)
	}
	projectType.value = type
	state.dialogFormVisible = true

	listFileTypeApi().then((res: any) => {
		hzlist.value = res.data
	})
	listStageTypeApi(type).then((res: any) => {
		selectlist.value = res.data
		// console.log(res.data, 'hzlist')
	})
}

const detailMethods = async (row: any) => {
	state.form['id'] = row.id
	state.form.definitionName = row.definitionName
	state.form.suffixType = row.suffixType
	state.form.businessStage = row.businessStage
	state.form.businessCode = row.businessCode
	state.form.mustUpload = row.mustUpload
	state.form.multiple = row.multiple
	state.form.remark = row.remark
}
const sumbitHandle = async (formEl: FormInstance | undefined, isFlag: Boolean) => {
	if (!formEl) {
		return
	}
	await formEl.validate((valid, fields) => {
		if (valid) {
			if (state.isUpdateFlag) {
				submitRecord()
			} else {
				submitRecordupload()
			}
		} else {
			console.log('提交错误', fields)
		}
	})
}
const submitRecord = async () => {
	await addinsertApi(projectType.value, state.form).then(res => {
		ElMessage.success({
			message: '操作成功',
			duration: 500
		})
		cancelHandle()
	})
}
const submitRecordupload = async () => {
	await updateinsertApi(projectType.value, state.form).then(res => {
		ElMessage.success({
			message: '更新成功',
			duration: 500
		})
		cancelHandle()
	})
}
const reset = () => {
	var linshi = {
		definitionName: '',
		suffixType: '',
		businessStage: '',
		businessCode: '',
		mustUpload: 0,
		multiple: 0,
		remark: ''
	}
	state.form = { ...linshi }
}
const cancelHandle = () => {
	ruleFormRef.value?.resetFields() // 表单验证关闭
	reset()
	state.dialogFormVisible = false
	emit('refreshDataList')
}

defineExpose({
	init
})
</script>

<style scoped>
.dialog-footer {
	padding-bottom: 20px;
}
</style>
